<template>
  <view class="page-content">
    <f-navbar
      title="详情"
      bgColor="linear-gradient(101deg, #47B352 1%, #47B352 29%, #1F9970 100%)"
      fontColor="#ffffff"
      leftIconColor="#ffffff"
    ></f-navbar>
    <view class="order">
      <TaskItem>
        <view slot="moreInfo">
          <view class="item-info-sm">关联订单：{{}}</view>
          <view class="item-info-sm">派单时间：{{}}</view>
          <view class="item-info-sm">车牌号码：{{}}</view>
          <view class="item-info-sm">联系人：张三</view>
          <view class="item-info-sm">联系人电话：13777777777</view>
          <view class="item-info-sm">运输油品：油品信息1</view>
          <view class="item-info-sm">车辆牌号：京A88888</view>
          <view class="item-info-sm">桶数：8桶</view>
          <view class="item-info-sm">称重信息：200kg</view>
          <view class="item-info-sm">任务执行时间：：2023-3-30 20：20</view>
          <view class="item-info-sm">任务完成时间：：2023-3-30 20：20</view>
        </view>
      </TaskItem>
      <view class="tabs-container">
        <CollectionInfo :index="3"></CollectionInfo>
        <CollectionInfo :index="2"></CollectionInfo>
        <CollectionInfo :index="0"></CollectionInfo>
      </view>
    </view>
  </view>
</template>
<script>
import CollectionInfo from "../component/collectionInfo.vue";
import TaskItem from "../component/task-item.vue";
export default {
  components: {
    CollectionInfo,
    TaskItem,
  },
  data() {
    return {
      pageData: {},
    };
  },
  onLoad(option) {},
  methods: {
    getData() {},
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  position: relative;
  background: linear-gradient(101deg, #47b352 1%, #47b352 29%, #1f9970 100%);
  background-size: 100% 444rpx;
  background-repeat: no-repeat;

  .order {
    padding: 46rpx 30rpx 0 30rpx;
  }
  .tabs-container {
    padding: 30rpx 0;
  }
  .item-info-sm {
    margin-top: 20rpx;
    color: #666668;
    font-size: 30rpx;
  }
}
</style>
